<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }, mounted() {
    this.$nextTick(() => {
      // 初始化 WebSocket 连接
      this.$store.dispatch('webSocket/startWebSocket');

      // 在这里保存 this.$store 到一个变量
      const store = this.$store;

      // 在 beforeunload 事件中使用 store
      window.addEventListener('beforeunload', function (event) {
        store.dispatch('webSocket/clearWebSocket');
        // 在这里执行你的操作，例如保存数据
        // const confirmationMessage = '确定要离开页面吗？';
        // event.returnValue = confirmationMessage; // Standard for most browsers
        // return confirmationMessage; // For some older browsers
      });
    })
  }

};
</script>
<style>
body .el-table::before {
  z-index: inherit;
}

#app .theme-picker {
  display: none;
}
</style>
